<!DOCTYPE html>
<html>
<head>
    <title>Keyboard navigation</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">

                <ul id="verticalMenu" style="width:140px;margin-bottom:30px">
                    <li>
                        First Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2
                                <ul>
                                    <li>Sub sub item 1</li>
                                    <li>Sub sub item 2</li>
                                    <li>Sub sub item 3</li>
                                    <li>Sub sub item 4</li>
                                </ul>
                            </li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Second Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Third Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Fourth Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Fifth Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                </ul>

                <ul id="horizontalMenu">
                    <li>
                        First Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2
                                <ul>
                                    <li>Sub sub item 1</li>
                                    <li>Sub sub item 2</li>
                                    <li>Sub sub item 3</li>
                                    <li>Sub sub item 4</li>
                                </ul>
                            </li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Second Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Third Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Fourth Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Fifth Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                </ul>

            <script>
                $(document).ready(function() {
                    $("#verticalMenu").kendoMenu({orientation: "vertical" });
                    $("#horizontalMenu").kendoMenu();
                });

                    $(document.body).keydown(function(e) {
                        if (e.altKey && e.keyCode == 87) {
                            $("#verticalMenu").focus();
                        } else if (e.altKey && e.keyCode == 81) {
                            $("#horizontalMenu").focus();
                        }
                    });
            </script>

            <ul class="keyboard-legend" style="padding-top: 25px">
                <li>
                    <span class="button-preview">
                        <span class="key-button leftAlign">Alt</span>
                        +
                        <span class="key-button">W</span>
                    </span>
                    <span class="button-descr">
                        focuses vertical menu (clicking on it or tabbing also work)
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button leftAlign">Alt</span>
                        +
                        <span class="key-button">Q</span>
                    </span>
                    <span class="button-descr">
                        focuses the horizontal menu (clicking on it or tabbing also work)
                    </span>
                </li>
            </ul>

            <h4>Supported keys and user actions</h4>
            <ul class="keyboard-legend">
                <li>
                    <span class="button-preview">
                        <span class="key-button">Right</span>
                    </span>
                    <span class="button-descr">
                        Goes to the next item or opens an item group
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">Left</span>
                    </span>
                    <span class="button-descr">
                        Goes to the previous item or closes an item group
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">Down</span>
                    </span>
                    <span class="button-descr">
                        Opens an item group or goes to the next item in a group
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">Up</span>
                    </span>
                    <span class="button-descr">
                        Goes to the previous item in a group
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">Enter</span>
                    </span>
                    <span class="button-descr">
                        Select or navigate item (same as click)
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">Esc</span>
                    </span>
                    <span class="button-descr">
                        closes the innermost open group
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button">Tab</span>
                    </span>
                    <span class="button-descr">
                        tabs away from the Menu on the next focusable page element
                    </span>
                </li>
                <li>
                    <span class="button-preview">
                        <span class="key-button leftAlign">Shift</span>
                        +
                        <span class="key-button">Tab</span>
                    </span>
                    <span class="button-descr">
                        tabs away from the Menu on the previous focusable page element
                    </span>
                </li>
            </ul>

        </div>
</body>
</html>
